<template>
  <div>
    <editor
      :id="editorId"
      style="visibility: hidden"
    />
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 把tinymce插件引入抽取为一个文件
// import { contentStyle } from './plugins'
// import { uploadFile } from '~/utils'

export default {
  name: 'TinymceEditor',
  components: {
    Editor
  },
  props: {
    // 富文本内容
    value: {
      type: String,
      default: ''
    },
    // 自定义选项
    opt: {
      type: Object,
      default: () => {}
    },
    // 控制禁用状态
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 生成随机id，用uuid可能会更好
      editorId: `editor-${Math.floor(Math.random() * 1000000)}`,
      // 富文本实例
      editor: null
    }
  },
  watch: {
    // 实现v-model更新内容
    value(val, oldVal) {
      if (this.editor && val !== oldVal && val !== this.editor.getContent()) {
        this.editor.setContent(val)
      }
    },
    // 控制禁用
    disabled(val) {
      if (this.editor !== null) {
        this.editor.setMode(val ? 'readonly' : 'design')
      }
    }
  },
  mounted() {
    // 初始化富文本
    this.init()
  },
  destroyed() {
    // 销毁实例
    if (this.editor) {
      this.editor.destroy()
      this.editor = null
    }
  },
  methods: {
    init() {
      // 默认配置
      const opt = {
        // selector dom 来初始化
        selector: '#' + this.editorId,
        // menubar 不想顶栏太高所以隐藏掉了
        menubar: false,
        // 指定使用的插件
        plugins: [
          'autolink lists link image',
          'searchreplace charmap emoticons',
          'media help paste wordcount codesample hr preview'
        ],
        // 选择显示在 toolbar 上的功能
        toolbar:
          'bold italic underline strikethrough | forecolor backcolor removeformat | ' +
          'fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | ' +
          'bullist numlist | outdent indent | subscript superscript | hr | ' +
          'charmap emoticons | link image media codesample | preview help',
        // 指定使用的字体，默认没有中文字体
        font_formats:
          'Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; AkrutiKndPadmini=Akpdmi-n;宋体=宋体;黑体=黑体;仿宋=仿宋;微软雅黑=Microsoft YaHei;楷体-GB2312=楷体-GB2312',
        // 引入语言包，也要引入下载好的js文件，下载地址(https://www.tiny.cloud/get-tiny/language-packages/)
        language: 'zh_CN',
        height: 400,
        // 工具栏显示模式，默认只显示一行
        toolbar_mode: 'wrap',
        // 如果不用cdn，要手动引入皮肤样式
        skin: false,
        content_css: false,
        // content_style: contentStyle,
        // 图片上传
        automatic_uploads: true,
        file_picker_types: 'image',
        images_upload_handler: (blobInfo, success, failure) => {
          // 调用了一个公共函数，会返回上传好的图片地址
          // uploadFile({ filename: blobInfo.filename(), blob: blobInfo.blob() })
          //   .then((res) => {
          //     success(res)
          //   })
          //   .catch((err) => {
          //     console.debug(err)
          //     failure(err)
          //   })
        },
        // 合并配置
        ...this.opt,
        // 富文本实例化之前执行的回调
        setup: (editor) => {
          this.editor = editor
          // 注册初始化的事件
          editor.on('init', (e) => this.initSetup(e))
        }
      }

      // 参数
      tinymce.init(opt)
    },
    initSetup() {
      if (!this.editor) return
      this.editor.setContent(this.value)

      // 注册富文本更新的事件，监听更新实现v-model
      this.editor.on('change keyup undo redo', () => {
        const content = this.editor.getContent()
        this.$emit('input', content)
      })
    }
  }
}
</script>

<style lang="scss" scope>
// 引入富文本皮肤
// @import '~tinymce/skins/ui/oxide/skin.css';
</style>
